<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border: 1px solid #0b85cc;
            width: 500px;
        }

        td, th {
            border: 1px solid #0b85cc;
        }
    </style>
</head>
<body>
<table align="center">
    <tr>
        <th width="100px">学科</th>
        <th>说明</th>
    </tr>
    <tr>
        <td>Java</td>
        <td>何以解忧，唯有Java</td>
    </tr>
    <tr>
        <td>PHP</td>
        <td>php世界上最好的编程语言</td>
    </tr>
    <tr>
        <td>Pytdon</td>
        <td>人生苦短，要学pytdon</td>
    </tr>
    <tr>
        <td>JavaScipt</td>
        <td>前端牛逼</td>
    </tr>
</table>
<script>
    window.onload = function () {
        var tds = document.getElementsByTagName("td");
        for (var i = 0; i < tds.length; i++) {
            tds[i].onclick = function () {
                var _this = this;

                // for (var j = 0; j < _this.childNodes.length; j++) {
                //     if (_this.childNodes[i].nodeName == "INPUT") {
                //         return false;
                //     }
                // }
                var stext = this.innerText;//获取内容
                this.innerHTML = '';//清空内容


                var inp = document.createElement("input");//创建节点
                inp.type = "text";
                inp.style.cssText = "border:0px;font-size:16px;width:100%";
                inp.value = stext;
                this.appendChild(inp);
                inp.focus();//焦点事件
                // inp.select();//选中事件
                inp.onkeyup = function (e) {
                    var event = e || window.event;
                    if (event.keyCode == 13) {
                        _this.innerHTML = this.value;
                    } else if (event.keyCode == 27) {
                        _this.innerHTML = stext;
                    }
                }
            }
        }
    }
</script>
</body>
</html>